<template>
  <div class="department">
    <department-search @query-click="handleQueryClick" @reset-click="handleResetClick" />
    <department-content
      ref="contentRef"
      @new-click="handleNewBtnClick"
      @edit-click="handleEditBtnClick"
    />
    <department-modal ref="modalRef"></department-modal>
  </div>
</template>

<script setup lang="ts">
import DepartmentSearch from './c-cpns/department-search.vue'
import DepartmentContent from './c-cpns/department-content.vue'
import DepartmentModal from './c-cpns/department-modal.vue'
import { ref } from 'vue'

const contentRef = ref<InstanceType<typeof DepartmentContent>>()
const modalRef = ref<InstanceType<typeof DepartmentModal>>()

function handleQueryClick(formData: any) {
  // console.log(formData)
  contentRef.value?.fetchPageListData(formData)
}

function handleResetClick() {
  contentRef.value?.fetchPageListData()
}

function handleNewBtnClick() {
  modalRef.value?.setModalVisible()
}

function handleEditBtnClick(itemData: any) {
  // console.log(itemData)
  modalRef.value?.setModalVisible(false, itemData)
}
</script>

<style lang="less" scoped>
.department {
  border-radius: 8px;
  overflow: hidden;
}
</style>
